<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首页 - 人力资源管理系统</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    :root {
      --primary-color: #1890ff;
      --primary-hover: #40a9ff;
      --success-color: #52c41a;
      --warning-color: #faad14;
      --danger-color: #ff4d4f;
      --text-primary: #1f2937;
      --text-secondary: #6b7280;
      --bg-light: #f9fafb;
      --border-color: #e5e7eb;
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: var(--bg-light);
      color: var(--text-primary);
      line-height: 1.5;
    }

    .layout {
      display: flex;
      min-height: 100vh;
    }

    .sidebar {
      width: 240px;
      background: #001529;
      color: #fff;
      display: flex;
      flex-direction: column;
      position: fixed;
      height: 100vh;
      transition: all 0.3s ease;
    }

    .sidebar h2 {
      font-size: 20px;
      font-weight: 600;
      padding: 24px;
      margin: 0;
      color: rgba(255, 255, 255, 0.95);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar ul {
      list-style: none;
      padding: 16px 0;
      margin: 0;
    }

    .sidebar li {
      padding: 0 16px;
      margin: 4px 0;
    }

    .sidebar li a {
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
      padding: 12px 16px;
      border-radius: 6px;
      display: block;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .sidebar li a:hover {
      color: rgba(255, 255, 255, 0.95);
      background: rgba(255, 255, 255, 0.1);
    }

    .sidebar li.active a {
      color: #fff;
      background: var(--primary-color);
    }

    .main {
      flex: 1;
      margin-left: 240px;
      display: flex;
      flex-direction: column;
      background: var(--bg-light);
    }

    .topbar {
      height: 64px;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0 24px;
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .topbar .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      flex: 1;
    }

    .topbar .user {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .topbar .user span {
      color: var(--text-secondary);
      font-size: 14px;
    }

    .topbar .user img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      box-shadow: var(--shadow-sm);
    }

    .content {
      flex: 1;
      padding: 24px;
    }

    .welcome-card {
      background: #fff;
      border-radius: 12px;
      padding: 32px;
      margin-bottom: 24px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .welcome-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 200px;
      background: linear-gradient(45deg, var(--primary-color), #36cfc9);
      opacity: 0.1;
      border-radius: 0 0 0 100%;
    }

    .welcome-title {
      font-size: 28px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
    }

    .welcome-subtitle {
      font-size: 16px;
      color: var(--text-secondary);
      margin-bottom: 32px;
      max-width: 600px;
    }

    /* 数据概览样式 */
    .data-overview {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .overview-card {
      background: #fff;
      border-radius: 12px;
      padding: 24px;
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
      border: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .overview-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .overview-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      font-size: 24px;
      color: #fff;
    }

    .overview-icon.employees {
      background: var(--primary-color);
    }

    .overview-icon.ex-employees {
      background: var(--text-secondary);
    }

    .overview-icon.clients {
      background: var(--success-color);
    }

    .overview-icon.contracts {
      background: var(--warning-color);
    }

    .overview-icon.expiring {
      background: var(--danger-color);
    }

    .overview-number {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .overview-label {
      font-size: 14px;
      color: var(--text-secondary);
    }

    /* 图表区域样式 */
    .charts-section {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }

    .chart-card {
      background: #fff;
      border-radius: 12px;
      padding: 24px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-color);
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .chart-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .chart-container {
      height: 250px;
      position: relative;
    }

    /* 模拟图表样式 */
    .chart-placeholder {
      width: 100%;
      height: 100%;
      background: #f0f2f5;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      font-size: 14px;
      position: relative;
      overflow: hidden;
    }

    .chart-placeholder svg {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    /* 合同预警表格样式 */
    .warning-section {
      margin-bottom: 24px;
    }

    .warning-card {
      background: #fff;
      border-radius: 12px;
      padding: 24px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-color);
    }

    .warning-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .warning-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .warning-action {
      color: var(--primary-color);
      font-size: 14px;
      text-decoration: none;
      cursor: pointer;
    }

    .warning-table {
      width: 100%;
      border-collapse: collapse;
    }

    .warning-table th {
      background: #fafafa;
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
      font-weight: 600;
      color: var(--text-primary);
    }

    .warning-table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
    }

    .warning-table tr:hover {
      background: #f5f7fa;
    }

    .expiry-date {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }

    .expiry-soon {
      background: rgba(250, 173, 20, 0.1);
      color: var(--warning-color);
    }

    .expiry-very-soon {
      background: rgba(255, 77, 79, 0.1);
      color: var(--danger-color);
    }

    .operation-link {
      color: var(--primary-color);
      text-decoration: none;
      cursor: pointer;
      margin-right: 12px;
    }

    @media (max-width: 1366px) {
      .data-overview {
        grid-template-columns: repeat(3, 1fr);
      }
      
      .charts-section {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 1024px) {
      .data-overview {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .sidebar {
        width: 0;
        transform: translateX(-100%);
      }
      
      .main {
        margin-left: 0;
      }
      
      .data-overview {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="layout">
    <div id="sidebar-container"></div>

    <div class="main">
      <div class="topbar">
        <div class="title">首页</div>
        <div class="user">
          <span>管理员</span>
          <img src="assets/avatar.png" alt="用户头像">
        </div>
      </div>

      <div class="content">
        <div class="welcome-card">
          <h1 class="welcome-title">欢迎使用业信人力资源管理系统</h1>
          <p class="welcome-subtitle">快速访问各个功能模块，高效管理人力资源解决方案，助力企业提升管理效率。</p>
        </div>

        <!-- 数据概览部分 -->
        <div class="data-overview">
          <div class="overview-card">
            <div class="overview-icon employees">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
              </svg>
            </div>
            <div class="overview-number">132</div>
            <div class="overview-label">在职员工数量</div>
          </div>
          
          <div class="overview-card">
            <div class="overview-icon ex-employees">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <line x1="17" y1="8" x2="23" y2="14"></line>
                <line x1="23" y1="8" x2="17" y2="14"></line>
              </svg>
            </div>
            <div class="overview-number">27</div>
            <div class="overview-label">离职员工数量</div>
          </div>
          
          <div class="overview-card">
            <div class="overview-icon clients">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
              </svg>
            </div>
            <div class="overview-number">48</div>
            <div class="overview-label">客户数量</div>
          </div>
          
          <div class="overview-card">
            <div class="overview-icon contracts">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
            </div>
            <div class="overview-number">156</div>
            <div class="overview-label">合同数量</div>
          </div>
          
          <div class="overview-card">
            <div class="overview-icon expiring">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
              </svg>
            </div>
            <div class="overview-number">12</div>
            <div class="overview-label">即将到期合同</div>
          </div>
        </div>

        <!-- 图表区域 -->
        <div class="charts-section">
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title">员工性别比例</div>
            </div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <svg viewBox="0 0 400 250" preserveAspectRatio="none">
                  <circle cx="200" cy="125" r="80" fill="#e6f7ff" stroke="#1890ff" stroke-width="2"></circle>
                  <path d="M200 125 L200 45 A80 80 0 0 1 268 170 Z" fill="#1890ff"></path>
                  <text x="160" y="115" font-size="12" fill="#333">女性 65%</text>
                  <text x="230" y="140" font-size="12" fill="#333">男性 35%</text>
                </svg>
              </div>
            </div>
          </div>
          
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title">员工年龄阶段比例</div>
            </div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <svg viewBox="0 0 400 250" preserveAspectRatio="none">
                  <rect x="50" y="190" width="50" height="30" fill="#1890ff"></rect>
                  <rect x="120" y="150" width="50" height="70" fill="#1890ff"></rect>
                  <rect x="190" y="80" width="50" height="140" fill="#1890ff"></rect>
                  <rect x="260" y="120" width="50" height="100" fill="#1890ff"></rect>
                  <rect x="330" y="160" width="50" height="60" fill="#1890ff"></rect>
                  <text x="60" y="210" font-size="10" fill="#333">20-25岁</text>
                  <text x="130" y="170" font-size="10" fill="#333">26-30岁</text>
                  <text x="200" y="100" font-size="10" fill="#333">31-35岁</text>
                  <text x="270" y="140" font-size="10" fill="#333">36-40岁</text>
                  <text x="340" y="180" font-size="10" fill="#333">40岁以上</text>
                </svg>
              </div>
            </div>
          </div>
          
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title">派遣到客户公司的人员比例</div>
            </div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <svg viewBox="0 0 400 250" preserveAspectRatio="none">
                  <rect x="60" y="50" width="60" height="20" fill="#52c41a"></rect>
                  <rect x="60" y="80" width="120" height="20" fill="#52c41a"></rect>
                  <rect x="60" y="110" width="90" height="20" fill="#52c41a"></rect>
                  <rect x="60" y="140" width="180" height="20" fill="#52c41a"></rect>
                  <rect x="60" y="170" width="70" height="20" fill="#52c41a"></rect>
                  <text x="130" y="64" font-size="10" fill="#333">阿里巴巴 (15%)</text>
                  <text x="190" y="94" font-size="10" fill="#333">腾讯科技 (30%)</text>
                  <text x="160" y="124" font-size="10" fill="#333">百度在线 (22%)</text>
                  <text x="250" y="154" font-size="10" fill="#333">字节跳动 (45%)</text>
                  <text x="140" y="184" font-size="10" fill="#333">京东 (18%)</text>
                </svg>
              </div>
            </div>
          </div>
          
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title">按月统计工资发放总金额趋势</div>
            </div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <svg viewBox="0 0 400 250" preserveAspectRatio="none">
                  <polyline 
                    points="50,180 100,150 150,160 200,120 250,110 300,90 350,100" 
                    fill="none" 
                    stroke="#1890ff" 
                    stroke-width="3"
                  ></polyline>
                  <circle cx="50" cy="180" r="4" fill="#1890ff"></circle>
                  <circle cx="100" cy="150" r="4" fill="#1890ff"></circle>
                  <circle cx="150" cy="160" r="4" fill="#1890ff"></circle>
                  <circle cx="200" cy="120" r="4" fill="#1890ff"></circle>
                  <circle cx="250" cy="110" r="4" fill="#1890ff"></circle>
                  <circle cx="300" cy="90" r="4" fill="#1890ff"></circle>
                  <circle cx="350" cy="100" r="4" fill="#1890ff"></circle>
                  <text x="40" y="200" font-size="10" fill="#333">1月</text>
                  <text x="90" y="200" font-size="10" fill="#333">2月</text>
                  <text x="140" y="200" font-size="10" fill="#333">3月</text>
                  <text x="190" y="200" font-size="10" fill="#333">4月</text>
                  <text x="240" y="200" font-size="10" fill="#333">5月</text>
                  <text x="290" y="200" font-size="10" fill="#333">6月</text>
                  <text x="340" y="200" font-size="10" fill="#333">7月</text>
                </svg>
              </div>
            </div>
          </div>
        </div>

        <!-- 合同预警部分 -->
        <div class="warning-section">
          <div class="warning-card">
            <div class="warning-header">
              <div class="warning-title">未来一个月即将到期的合同</div>
              <a href="contract-management.html" class="warning-action">查看全部</a>
            </div>
            <table class="warning-table">
              <thead>
                <tr>
                  <th width="15%">姓名/客户名称</th>
                  <th width="15%">合同编号</th>
                  <th width="15%">合同类型</th>
                  <th width="15%">开始日期</th>
                  <th width="15%">到期日期</th>
                  <th width="10%">状态</th>
                  <th width="15%">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>张三</td>
                  <td>EMP2022071</td>
                  <td>劳动合同</td>
                  <td>2022-07-15</td>
                  <td><span class="expiry-date expiry-very-soon">2024-07-15</span></td>
                  <td>即将到期</td>
                  <td>
                    <a href="#" class="operation-link">查看</a>
                    <a href="#" class="operation-link">续签</a>
                  </td>
                </tr>
                <tr>
                  <td>李四</td>
                  <td>EMP2022072</td>
                  <td>劳动合同</td>
                  <td>2022-07-20</td>
                  <td><span class="expiry-date expiry-very-soon">2024-07-20</span></td>
                  <td>即将到期</td>
                  <td>
                    <a href="#" class="operation-link">查看</a>
                    <a href="#" class="operation-link">续签</a>
                  </td>
                </tr>
                <tr>
                  <td>王五</td>
                  <td>EMP2022081</td>
                  <td>劳动合同</td>
                  <td>2022-08-01</td>
                  <td><span class="expiry-date expiry-soon">2024-08-01</span></td>
                  <td>即将到期</td>
                  <td>
                    <a href="#" class="operation-link">查看</a>
                    <a href="#" class="operation-link">续签</a>
                  </td>
                </tr>
                <tr>
                  <td>赵六</td>
                  <td>EMP2022082</td>
                  <td>劳动合同</td>
                  <td>2022-08-05</td>
                  <td><span class="expiry-date expiry-soon">2024-08-05</span></td>
                  <td>即将到期</td>
                  <td>
                    <a href="#" class="operation-link">查看</a>
                    <a href="#" class="operation-link">续签</a>
                  </td>
                </tr>
                <tr>
                  <td>阿里巴巴</td>
                  <td>CLI2022073</td>
                  <td>服务合同</td>
                  <td>2022-07-25</td>
                  <td><span class="expiry-date expiry-very-soon">2024-07-25</span></td>
                  <td>即将到期</td>
                  <td>
                    <a href="#" class="operation-link">查看</a>
                    <a href="#" class="operation-link">续签</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/common.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', loadComponents);
    
    // 这里可以添加图表相关的JavaScript库，如ECharts或Chart.js
    // 实际项目中建议使用这些库来绘制真实的图表，而不是使用SVG模拟
  </script>
</body>
</html>
<div class="sidebar">
  <h2>人力资源管理系统</h2>
  <ul>
    <li><a href="EM-01.html">首页</a></li>
    <li><a href="employee-list.html">员工花名册</a></li>
    <li><a href="contract-management.html">合同管理</a></li>
    <li><a href="salary-management.html">工资管理</a></li>
    <li><a href="fixed-assets-management.html">固定资产管理</a></li>
    <li><a href="workstation-management.html">工位管理</a></li>
    <!-- 在此处新增大项目管理菜单项 -->
    <li><a href="big-project-management.html">大项目管理</a></li>
  </ul>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>
</div>
</body>
</html>